<template>
  <div>
      <Nav></Nav>
    <Chart></Chart>
    <div class="content_information">
      <p class="word_title">主营业务</p>
      <el-row :gutter="10">
        <el-col :span="4" style="margin-left:40px">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
             :default-openeds="['1']" 
            @close="handleClose"
            text-color="#333"
            active-text-color="#eca527"
            router>
            <el-submenu index="1" >
              <template slot="title">
                <span class="top_title">产品分类</span>
              </template>
              <el-menu-item-group  
               v-for="item in productlist" :key="item.id" 
               >
                <el-menu-item @click="saveNavS(item.name)" >{{item.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

          </el-menu>

           <el-menu
            class="el-menu-vertical-demo"
            :default-openeds="['1']" 
            @open="handleOpen"
            @close="handleClose"
            text-color="#333"
            active-text-color="#eca527"
            router>
            <el-submenu index="1">
              <template slot="title">
                <span class="top_title">服务分类</span>
              </template>
              <el-menu-item-group  v-for="item in servelist" 
              :key="item.id" >
                <el-menu-item  @click="saveNavState(item.name)">{{item.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="16" style="margin-left:20px" >

            <div class="chart_pic">
              <div class="chart_pic_item">
                  <!-- white -->
                  <div class="chart_item" v-for="item in productShow" :key="item.id" @click="getproductId(item.id)">
                    <div class="chart_image">
                      <img :src="item.img1" :onerror="defalutLogoUrl" >
                    </div>
                    <div class="chart_word">
                      <p>{{item.name}}</p>
                    </div>
                  </div>
                  <!-- white -->
                  
              </div>
               <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.pagenum"
                  :page-sizes="[3, 5, 10, 15]"
                  :page-size="pagination.pagesize"
                  layout=" prev, pager, next, jumper"
                  :total="pagination.total"
                >
                </el-pagination>

                <!-- 服务 -->

                <div class="chart_pic_item">
                  <!-- white -->
                  <div class="chart_item" v-for="item in serveShow" :key="item.id"  @click="getservetId(item.id)" >
                    <div class="chart_image">
                      <img :src="item.img1" :onerror="defalutLogoUrl" >
                    </div>
                    <div class="chart_word">
                      <p>{{item.name}}</p>
                    </div>
                  </div>
                  <!-- white -->
                  
              </div>
               <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.pagenum"
                  :page-sizes="[3, 5, 10, 15]"
                  :page-size="pagination.pagesize"
                  layout=" prev, pager, next, jumper"
                  :total="pagination.total"
                >
                </el-pagination>
            </div>

        </el-col>
      </el-row>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Nav from '../../components/Nav/Nav.vue'
import Chart from '../../components/Chart/Chart.vue'
import Footer from '../../components/Footer/Footer.vue'

export default {
  data() {
    return {
        productlist:"",
        servelist:"",
        activePath:'',
        pagination: {
          pagenum: 1,
          pagesize: 8,
          total: 5,
        },
        productShow:[],
        serveShow:[],
        sort:'',
        type:'',
        sort1:'',
         defalutLogoUrl:'this.src="'+  require("../../assets/img/6.jpg")  +'"',
    };
  },
  methods:{
       handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 渲染产品-服务菜单
      async getselectProduct(){
        const res = await this.http.get('/type/selectProduct')
        this.productlist = res.list;
        console.log(res);
      },
      async getSelectServe() {
        const res = await this.http.get("/type/selectServe");
        this.servelist = res.list;
        this.pagination.total = res.total;
        console.log(res);
      },
      // 
      async getProduct(){
        const res = await this.http.get('/product/selectPage',{
            type:this.sort,
            pagenum:this.pagination.pagenum,
            pagesize:this.pagination.pagesize
        })
        this.productShow = res.roleList;
        this.pagination.total = res.total;
        console.log("---productShow ---");
        console.log(this.productShow);

      },
       handleSizeChange(newSize) {
        this.pagination.pagesize = newSize;
        this.getProduct();
      },
      handleCurrentChange(newPage) {
        this.pagination.pagenum = newPage;
        this.getProduct();
      },
        saveNavS(name){
          console.log(name);
          this.sort = name;
          console.log("sort")
          console.log(this.sort);
          this.getProduct()
      },
      saveNavState(name){
          // console.log(name);
          this.sort1 = name;
          // console.log(this.sort1);
          this.getServe();
      },
      // 渲染serve数据
      async getServe(){
          const res = await this.http.get('/serve/selectPage',{
            type:this.sort1,
            pagenum:this.pagination.pagenum,
            pagesize:this.pagination.pagesize
          })
          this.serveShow = res.roleList;
          // console.log("---serveShow---");
          console.log(res);
          // console.log(this.serveShow);
      },
      // 获取id参数
      getproductId(id){
        console.log(id);
        this.$router.push({
          path:'/detail',
          query:{id:id}
        })
      },
      getservetId(id){
        this.$router.push({
          path:'/detail',
          query:{id:id}
        })
      }

  },
  created(){
      this.activePath = window.sessionStorage.getItem('activePath');
       this.getselectProduct();
       this.getSelectServe();
       this.getProduct();
       this.getServe();

  },
  components: {
    Nav,
      Chart,
      Footer
  },
};
</script>

<style  scoped >
.content_information{
  text-align: center;
  /* background: yellow; */
  height: 1000px;
}
.chart_pic{
  width: 800px;
  height: 700px;
  /* background: pink; */
}
.el-menu{
  background: #05a045 !important;
}
.top_title{
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
 .el-menu /deep/ .el-submenu__title:hover{
  color: #fff;
  background: #05a045 !important;
}
.el-menu{
 border-left:solid 2px #e6e6e6;
 border-bottom:solid 2px #e6e6e6 ;
}
.chart_pic_item{
  width:600px;
  height: 350px;
  /* background: #05a045; */
  border: 2px solid #05a045;
  margin: 0 auto;
}
.chart_item{
  float:left;
}
.chart_image{
  width: 120px;
  height: 120px;
  background: #fff;
  position: relative;
  top: 20px;
  margin-left: 20px;
}
.chart_image img{
  width:100%;
  height: 100%;
}
.chart_word{
  width: 100px;
  height: 100%;
  /* background: #fff; */
  position: relative;
  top: 14px;
  margin-left: 20px;
}
.chart_word p{
  display: block;
  font-size: 10px;
}

</style>
